<template>
  <div id="brandcenter">
    <navigationBar></navigationBar>
    <div class="container">
      <!-- 下方居中白色盒子 -->
      <div class="section">
        <!-- 商品分类 和品牌首字母 -->
        <div class="classfytitle">
          <div class="classfy">
            <span class="title1">商品分类</span>
            <div class="classfyright">
              <div class="rightbottom" style="margin-bottom:6px">
                <span>全部</span>
                <span v-for="(item, index) in goodslist" :key="index">
                  {{ item }}
                </span>
              </div>
            </div>
          </div>
          <div class="brand">
            <span class="title2">品牌首字母</span>
            <div class="brandright">
              <span
                class="alllist"
                v-for="(item, index) in brandlist"
                :key="index"
                >{{ item.brandF }}</span
              >
            </div>
          </div>
        </div>
        <!-- 全部品牌展示列表部分 -->
        <div class="brandcard">
          <ul class="brandshow">
            <li
              class="branditem"
              v-for="(item, index) in brandlist"
              :key="index"
            >
              <div class="cardright">
                <span>{{ item.brandF }}</span>
                <div class="right">
                  <div
                    class="itemcard"
                    v-for="(imgitem, i) in item.brandImg"
                    :key="i"
                    @click="tobranddetail()"
                  >
                    <img :src="imgitem.imgUrl" alt />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <right></right>
    <foot></foot>
  </div>
</template>

<script>
import right from "../../components/common/right_logo";
import navigationBar from "../../components/navigationBar";
import foot from "../../components/footer";
export default {
  components: {
    navigationBar,
    foot,
    right
  },
  data() {
    return {
      num: 1,
      //商品分类数据
      goodslist: [
        "品类A",
        "品类B",
        "品类C",
        "品类D",
        "品类E",
        "品类F",
        "品类G",
        "品类H",
        "品类I",
        "品类J",
        "品类K",
        "品类L",
        "品类N",
        "品类M",
        "品类O",
        "品类P",
        "品类Q",
        "品类R"
      ],
      //   品牌图片列表
      brandlist: [
        {
          brandF: "#",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "A",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "Z",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "B",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "C",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "D",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "E",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "F",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "G",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "H",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "I",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "J",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "K",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "L",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "M",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        },
        {
          brandF: "N",
          brandImg: [
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            },
            {
              imgUrl: ""
            }
          ]
        }
      ]
    };
  },
  methods: {
    tobranddetail() {
      this.$router.push({ path: "/branddetail", name: "branddetail" });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: rgb(238, 232, 232);
  padding-top: 0px;
  .section {
    width: 1200px;
    margin: 0 auto;
    // min-height: 546px;
    border: 20px solid rgb(238, 232, 232);
    .classfytitle {
      background-color: #fff;
      width: 100%;
      padding: 12px 16px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .classfy {
        display: flex;
        width: 100%;
        height: 66%;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        .title1 {
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(50, 50, 50, 1);
          margin-right: 30px;
        }
        .classfyright {
          flex: 1;
          height: 100%;
          margin-top: -2px;
          span.righttop {
            display: block;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(224, 32, 63, 1);
            // margin-bottom: 10px;
            cursor: pointer;
          }
          .rightbottom {
            span {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 520;
              color: rgba(93, 93, 93, 1);
              line-height: 26px;
              margin-right: 10px;
              cursor: pointer;
            }
          }
        }
      }
      .brand {
        display: flex;
        width: 100%;
        height: 33%;
        margin-top: 6px;
        .title2 {
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(50, 50, 50, 1);
          margin-right: 30px;
          margin-top: 3px;
        }
        .brandright {
          margin-top: 2px;
          .allbrand {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(224, 32, 63, 1);
            margin-bottom: 10px;
            cursor: pointer;
            margin-right: 10px;
          }
          .alllist {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 520;
            color: rgba(93, 93, 93, 1);
            line-height: 26px;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .brandcard {
      width: 100%;
      background-color: #fff;
      //   height: 400px;
      padding: 0px 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .brandshow {
        list-style: none;
        margin-top: -14px;
        margin-left: -36px;
        .branditem {
          width: 100%;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          padding: 10px 0;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          .cardright {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            span {
              position: absolute;
              display: block;
              top: 1px;
              height: 100%;
              width: 20px;
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(93, 93, 93, 1);
            }
            .right {
              display: flex;
              flex-wrap: wrap;
              width: 96%;
              padding-left: 8px;
              margin-left: 24px;
              box-sizing: border-box;
              .itemcard {
                width: 210px;
                height: 138px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(220, 220, 220, 1);
                margin: 5px;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
